<template>
  <el-dialog width="337px" :model-value="modelValue" @update:modelValue="updateModelValue" :show-close="false"
             :close-on-click-modal="false"
             :close-on-press-escape="false" :destroy-on-close="true">
    <el-form ref="formRef" :model="form" :rules="rules" style="margin-top: 10px;text-align: center;">
      <el-form-item prop="code">
        <el-input v-model="form.code" size="large" :prefix-icon="Iphone" placeholder="请输入验证码"
                  style="width: 180px;"/>
        <img v-if="captcha" :src="captcha" :style="captchaStyle" @click="changeCaptcha" alt="验证码"
             style="margin-left: 5px;"/>
      </el-form-item>
      <div style="text-align: center;">
        <el-button type="primary" @click="handleSubmit" :loading-icon="Eleme" :loading="loading">提交</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, watch} from 'vue'
import {Iphone, Message, Eleme} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus"
import {getCaptcha, checkCaptcha, checkSms} from '@/api/company/common/index.js';


const emit = defineEmits(['done', 'update:modelValue']);

const loading = ref(false);

const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  phoneNumber: String //手机号
});

/** 更新modelValue */
const updateModelValue = (value) => {
  emit('update:modelValue', value);
};


const formRef = ref(null);

const form = reactive({
  uuid: '',
  code: '',//验证码
  phoneNumber: ''//注册手机号
});

const rules = ref({
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur'
    },
    {
      min: 4,
      max: 4,
      message: '请输入4位验证码',
      trigger: 'blur'
    }
  ]
})


/** 图形验证码 */
const captcha = ref('');

/** 图形验证码样式 */
const captchaStyle = ref({});
/** 获取图形验证码 */
const changeCaptcha = () => {
  getCaptcha()
      .then((data) => {
        console.log(data);
        captcha.value = `${data.data.img}`;
        captchaStyle.value = {
          // transform: `scaleX(1.${Math.floor(Math.random() * (0 - 5) + 5)}) skewX(-${Math.floor(Math.random() * (0 - 30) + 30)}deg) scale(1.04)`,
          // filter: `contrast(200%) hue-rotate(${Math.floor(Math.random() * (0 - 360) + 360)}deg)`
        };
        form.uuid = data.data.uuid;
        formRef.value?.clearValidate?.();
      })
      .catch((e) => {
        ElMessage.error(e.message);
        //console.log(e.message);
        // EleMessage.error({message: e.message, plain: true});
      });
};


const handleCancel = () => {
  updateModelValue(false);
}

const handleSubmit = () => {
  //判断是否填入4位字符
  // if (form.code === '') {
  //   ElMessage.error('请输入验证码');
  // }
  // if (form.code.length !== 4) {
  //   ElMessage.error('验证码长度不正确');
  // }
  // ElMessage.error(e.message);

  loading.value = true;
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      return;
    }
    let data = {
      uuid: form.uuid,
      code: form.code,
      phoneNumber: props.phoneNumber
    };
    //提交后台验证验证码
    checkCaptcha(data).then(res => {
      loading.value = false;
      //关闭
      console.log(res);//看下返回结果//{msg: '验证码校验成功', code: 200, data: '614438'}
      ElMessage.success('已发送短信验证码');
      updateModelValue(false);
      emit("done");
    }).catch(e => {
      loading.value = false;
      ElMessage.error(e.message);//这边增加一下显示时间
      changeCaptcha();//获取验证码
      //console.log(e);
    });
  });
};


watch(
    () => props.modelValue,
    (modelValue) => {
      // console.log(modelValue);
      if (modelValue) {
        changeCaptcha();//获取验证码
      } else {
        form.code = '';
        form.uuid = '';
      }
    }
);

</script>

